<template>
  <view class="search">
    <navbars
      title="云上农夫"
      urls="/packageA/search/index"
      types="navigate"
      imgs="/static/search.jpg"
    />
    <view class="ser">
      <navigator
        url="/pages/mine/index"
        open-type="switchTab"
        hover-class="none"
      >
        <u-icon size="30" name="/static/cx.jpg" class="ico"></u-icon>
      </navigator>
      <ugo-search class="sss" :keyword="keyword" />
    </view>
    <view class="his">
      <view class="ls-ss">
        <text>历史搜索</text>
        <u-icon size="24" name="/static/del.jpg" class="ico"></u-icon>
      </view>
      <view class="ls-gg">
        <u-grid :border="false" col="4">
          <u-grid-item v-for="(listItem, listIndex) in list" :key="listIndex">
            <text class="grid-text" @click="goDetail(listItem.id)">{{
              listItem.title
            }}</text>
          </u-grid-item>
        </u-grid>
      </view>
    </view>
    <view class="his">
      <view class="ls-ss">
        <text>搜索发现</text>
      </view>
      <view class="ls-gg">
        <u-grid :border="false" col="4">
          <u-grid-item v-for="(listItem, listIndex) in list" :key="listIndex">
            <text class="grid-text" @click="goDetail(listItem.id)">{{
              listItem.title
            }}</text>
          </u-grid-item>
        </u-grid>
      </view>
    </view>
    <view class="alls">
      <view class="hot">
        <u-icon size="20" name="/static/hot.jpg" class="ico"></u-icon>
        <text>大家都在搜</text>
      </view>
      <view class="all-ss">
        <view class="ss-item" v-for="(item, i) in serList" :key="i">
          <span>{{ i + 1 }}</span>
          <text>{{ item }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data: () => ({
    keyword: "",
    list: [
      {
        id: 1,
        name: "photo",
        title: "亲子研学",
      },
      {
        id: 2,
        name: "lock",
        title: "亲子农场",
      },
      {
        id: 3,
        name: "star",
        title: "大王农业",
      },
      {
        id: 4,
        name: "hourglass",
        title: "采摘园",
      },
      {
        id: 5,
        name: "home",
        title: "垂钓",
      },
    ],
    serList: [
      "有机菜地托管",
      "农场餐厅团购",
      "赫尔农场换装写真",
      "小龙虾垂钓",
      "蘑菇采摘",
      "有机菜地托管",
      "农场餐厅团购",
      "赫尔农场换装写真",
      "小龙虾垂钓",
      "蘑菇采摘",
    ],
  }),
  computed: {},
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  onLoad(options) {},
  // 生命周期 - 页面展示（不可以访问DOM元素）
  onShow() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  onReady() {},
  // 方法集合
  methods: {
    goDetail(id) {
      uni.navigateTo({
        url: "/packageA/search/detail?id=" + id,
      });
    },
  },
};
</script>

<style lang='scss' scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

.search {
  font-family: "Poppins";
  background-color: #f9f9f9;
  position: absolute;
  width: 100%;
  height: 100%;
  .ser {
    display: flex;
    margin-bottom: 20rpx;
    navigator {
      margin-left: 3%;
      display: flex;
    }
    .sss {
      width: 80%;
    }
  }
  .his {
    padding: 0 5%;
    .ls-ss {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .ls-gg {
      margin-bottom: 20rpx;
      .grid-text {
        background-color: #eeebeb;
        padding: 0 10rpx;
        margin: 10rpx 0;
        width: 140rpx;
        height: 60rpx;
        text-align: center;
        line-height: 60rpx;
        border-radius: 30rpx;
        font-size: 28rpx;
      }
    }
  }
  .alls {
    width: 90%;
    margin: 0 auto;
    background-color: #f4dcdc;
    border-radius: 40rpx;
    padding-bottom: 40rpx;
    .hot {
      display: flex;
      align-items: center;
      color: #e40b03;
      padding: 20rpx;
    }
    .all-ss {
      width: 90%;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 40rpx;
      padding: 20rpx;
      .ss-item {
        margin: 20rpx 0;
        font-size: 28rpx;
        span {
          margin: 0 5%;
          position: relative;
        }
        &:nth-of-type(-n + 3) span {
          color: #ff4d00;
        }
        &:nth-of-type(-n + 3) text::after {
          position: absolute;
          left: 80%;
          content: "";
          width: 30rpx;
          height: 30rpx;
          background: url("/static/tap.jpg") no-repeat;
          background-size: cover;
        }
        &:nth-of-type(6) text::before {
          position: absolute;
          left: 80%;
          content: "新";
          color: #ff4d00;
        }
      }
    }
  }
}
</style>